import React, { Component } from 'react'

export default class App extends Component {


    state = {
        list: ['摇一摇', '跳一跳', '扭一扭', '舔一舔', '泡一泡'],
        proList: [
            {
                name: '华为',
                list: [
                    'P30',
                    'P40',
                    'P50'
                ]
            },
            {
                name: '小米',
                list: [
                    'M1',
                    'M2',
                    'M3'
                ]
            },
            {
                name: '锤子',
                list: [
                    'T1',
                    'T2',
                    'T3'
                ]
            }
        ],
        htmlStr:'<h1 style="color:red">react 从入门到精通</h1>'
    }

    render() {
        return (
            <>
                <ul>
                    {
                        this.state.list.map((item, index) => (<li key={index}>{item}</li>))
                    }
                </ul>

                {/* 
                    不要在 jsx 中使用 for 循环系列(for/for in/for of)
                    在react 中建议使用map ,返回值就是模版
                    使用的时候需要添加一个key 属性
                    为了让虚拟DOM跟真实DOM一一对应

                */}

                <ol>
                    {
                        this.state.proList.map((item, index) => {
                            return (
                                <li key={index}>
                                    <h3>{item.name}</h3>
                                    <p>
                                        {
                                            item.list.map((item1,index1)=>{
                                                return <span key={index1}>{item1}</span>
                                            })
                                        }
                                    </p>
                                </li>
                            )
                        })
                    }
                </ol>
            </>
        )
    }
}
